<template lang="html">
  <div class="search">
    <!-- <c-header :title="'搜索'"></c-header> -->
    <van-search  v-model="value" show-action @search="onSearch" style="background-color:#fff">
      <div slot="action" @click="toBack" class="search-btn">取消</div>
    </van-search>
    <div class="search-tags">
      <h5>热门推荐</h5>
      <span class="van-tags" v-for="t in hot_keys" @click="onSearch(t.title)">{{t.title}}</span>
    </div>
    <div class="search-history">
        <h5>搜索历史</h5>
        <van-cell-group>
          <div class="van-cell van-hairline" @click="query">
              <div class="van-cell__title">
              <span class="van-cell__text">智能电冰箱</span>
            </div>
            <i class="van-icon van-cell__right-icon van-icon-delete" @click="del"></i>
          </div>
          <div class="van-cell van-hairline" @click="query">
              <div class="van-cell__title">
              <span class="van-cell__text">智能门锁</span>
            </div>
            <i class="van-icon van-cell__right-icon van-icon-delete" @click="del"></i>
          </div>
        </van-cell-group>
        <div class="clear">
            <van-button><van-icon name="delete" />清空历史记录</van-button>
        </div>
    </div>
  </div>
</template>
<script>
import {
  mapGetters,
  mapActions
} from 'vuex'
export default {
  data() {
    return {
      value: ''
    }
  },
  created() {
    this.getHotKeys()
  },
  computed: {
    ...mapGetters([
      'hot_keys'
    ])
  },
  methods: {
    ...mapActions([
      'getHotKeys'
    ]),
    toBack() {
      this.$router.back()
    },
    onSearch(searchKey) {
      this.$router.push({name: 'proList',query: {searchKey: searchKey}})
    },
    query() {
      console.log(1);
    },
    del(event) {
      this.$toast('删除成功!');
      event.cancelBubble = true;
    },
    onClose(clickPosition, instance) {
      switch (clickPosition) {
        case 'left':
        case 'cell':
        case 'outside':
          instance.close();
          break;
        case 'right':
          this.$dialog.confirm({
            message: '确定删除吗？'
          }).then(() => {
            instance.close();
          });
          break;
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/styles/common.scss';
.search {
    background-color: #fff;
    padding-bottom: px2rem(20px);
    h5 {
        display: block;
        width: 100%;
        @include font-dpr(14px);
        text-indent: px2rem(10px);
        line-height: px2rem(50px);
        border-top: 5px solid #f2f2f2;
        color: #000;
    }
    &-btn {
        width: px2rem(80px);
        margin-left: px2rem(20px);
    }
    &-tags {
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-start;
        .van-tags {
            @include font-dpr(12px);
            border-radius: px2rem(20px);
            padding: px2rem(10px) px2rem(20px);
            margin: px2rem(10px);
            background-color: #f44;
            color: #fff;
        }
    }
    &-history {
        a {
            display: block;
            border-bottom: 1px solid #f0f2f5;
            height: px2rem(50px);
            line-height: px2rem(50px);
            padding-left: px2rem(15px);
            &:active,
            &:hover,
            &:link,
            &:visited {
                color: #666;
            }
        }
        .van-cell {
            padding: 5px 15px;
            font-size: 12px;
        }
        .clear {
            display: flex;
            width: 100%;
            margin-top: px2rem(45px);
            .van-icon {
                margin: px2rem(5px);
            }
            button {
                display: inline-block;
                height: px2rem(60px);
                line-height: px2rem(60px);
                margin: 0 auto;
            }
        }

    }
}
</style>
